<template>
	<el-dialog v-model="dialog" title="用户明细" width="60%">
		<el-tabs v-model="activeName">
			<el-tab-pane label="用户信息" name="info">
				<el-descriptions class="margin-top" title="基本信息" :column="3" border>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户编号</div>
						</template>
						{{ userInfo.userNumber }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户头像</div>
						</template>
						<el-image style="width: 50px; height: 50px" :src="userInfo.avatarUrl"
							:preview-src-list="[userInfo.avatarUrl]" fit="cover" :preview-teleported="true" />
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户手机号</div>
						</template>
						{{ userInfo.phone }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户昵称</div>
						</template>
						{{ userInfo.nickName }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户等级</div>
						</template>
						{{ userInfo.userGrade }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">来源</div>
						</template>
						{{ userInfo.userSource }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">所在省份</div>
						</template>
						{{ userInfo.province }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">所在城市</div>
						</template>
						{{ userInfo.city }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">账户余额</div>
						</template>
						<span style="color: #f56c6c">￥{{ userInfo.accountBalance }}</span>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">邀请人</div>
						</template>
						<div v-if="userInfo.parentUserInfo">
							<el-avatar :size="50" :src="userInfo.parentUserInfo.avatarUrl" />
							<div>{{ userInfo.parentUserInfo.nickName }}</div>
						</div>
					</el-descriptions-item>
				</el-descriptions>
			</el-tab-pane>
			<el-tab-pane label="余额明细" name="bill">
				<user-bill v-if="dialog" :userId="userInfo.id" />
			</el-tab-pane>
			<el-tab-pane label="推广人列表" name="share">
				<TeamPage ref="teamPageRef" v-if="dialog" :userId="userInfo.id"></TeamPage>
			</el-tab-pane>
			<el-tab-pane label="推广订单" name="shareOrder">
				<DstributionOrder ref="dstributionOrderRef" v-if="dialog" :userId="userInfo.id"></DstributionOrder>
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, reactive, toRefs } from 'vue';
export default defineComponent({
	components: {
		UserBill: defineAsyncComponent(() => import('../userbill/index.vue')),
		DstributionOrder: defineAsyncComponent(() => import('/@/views/mall/distributionorder/index.vue')),
		TeamPage: defineAsyncComponent(() => import('/@/views/mall/userinfo/teampage.vue'))
	},
	emit: ['initPage'],
	setup(props, { emit }) {
		const data = reactive({
			userInfo: {
				id: '',
				userNumber: '',
				avatarUrl: '',
				phone: '',
				nickName: '',
				userGrade: '',
				userSource: '',
				province: '',
				city: '',
				accountBalance: '',
				parentUserInfo: { avatarUrl: '', nickName: '' },
			},
			dialog: false,
			activeName: 'info',
		});
		const initPage = (userInfo: any) => {
			data.userInfo = userInfo;
			data.dialog = true;
			data.activeName = 'info';
		};
		return {
			...toRefs(data),
			initPage,
		};
	},
});
</script>
